<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>test select</title>
    <!-- Bootstrap -->
    <link href="../static/lib/bootstrap-3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <link href="../static/lib/bootstrap-select/bootstrap-select.css" rel="stylesheet">
    <!-- <link rel="stylesheet" href="static/css/login.css"> -->
    </link>
</head>

<body style="width: 400px; text-align: center; margin-top: 200px;">
    单选
    <select id="demo1" class="form-control selectpicker">
        <option value="1">广东省</option>
        <option value="2">广西省</option>
        <option value="3">福建省</option>
        <option value="4">湖南省</option>
        <option value="5">山东省</option>
    </select>
    多选
    <select id="demo2" class="form-control selectpicker" multiple data-live-search="true" data-selected-text-format="count > 3">
        <option value="1">广东省</option>
        <option value="2">广西省</option>
        <option value="3">福建省</option>
        <option value="4">湖南省</option>
        <option value="5">山东省</option>
    </select>

    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="../static/lib/jquery-1.12.4/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="../static/lib/bootstrap-3.4.1/js/bootstrap.min.js"></script>
    <!-- bootstrap-select -->
    <script src="../static/lib/bootstrap-select/bootstrap-select.js"></script>
    <script src="../static/lib/bootstrap-select/defaults-zh_CN.min.js"></script>
    <script>
        // $(function () {
        //     $('select').selectpicker();
        // });
    </script>
</body>

</html>